<template>
      <div>
            <!-- 商品展示 begin -->
            <div class="imgBox">
                  <img :src="item.imgSrc" alt="" v-for="item in detailsList.imgs" :key="item.id" style="width:100%">
            </div>
            <!-- 商品展示 end -->

            <!-- 快捷导航 begin -->
            <div class="quickNavBox bottom" @click="showHide">
                  <div class="quickNavList displayNone">
                        <router-link to="/index" class="navItem nav1">首页</router-link>
                        <router-link to="/index/list" class="navItem nav2">分类</router-link>
                        <router-link to="/index/cart" class="navItem nav3">购物车</router-link>
                        <router-link to="/index/order" class="navItem nav4">订单</router-link>
                        <router-link to="/index/mine" class="navItem nav5">我的</router-link>
                        <i class="navIc"></i>
                  </div>
            </div>
            <!-- 快捷导航 end -->

            <!-- 页脚购物车部分 begin -->
            <div class="cartBox">
                  <div class="cartImg"></div>
                  <div class="cartText">购物车是空的</div>
                  <div class="cartPay">去结算</div>
            </div>
            <!-- 页脚购物车部分 end -->  

      </div>
</template>
<script>
export default {
      data(){
            return {
                  detailsList:{}
            }
      },
      methods:{
            // 获取详情图片的方法
             getDetailsList(){
                  this.jq.get(this.apiurl+'/details/title').done(result=>{
                        if(result.error==0){
                              this.detailsList=result.data
                        }
                  })
            },

            // 控制快捷导航的子菜单的显示或隐藏
            showHide(){
                  this.jq('.quickNavList').toggleClass('displayNone')
            }
            
      },
      created(){
            // 调用获取详情图片的方法
            this.getDetailsList()
      }
}
</script>
<style>
/*设置图片的尺寸 begin*/ 
.imgBox{
      margin-bottom:5rem;
}
/*设置图片的尺寸 end*/ 

/*快捷导航 begin*/
.quickNavBox{
      position: fixed;
      z-index: 1000;
      right: 0;
      bottom: 60px;
      width: 36px;
      height: 36px;
      background: rgba(0,0,0,0.8) url('/static/img/bm.png') 7px 7px no-repeat;
      background-size: 65px 20px;
      border: 1px solid #757575;
      border-radius: 4px 0 0 4px; 
}
.quickNavList{
      position:absolute;
      width: 95px;
      right: -1px;
      bottom: 42px;
      border: 1px solid #757575;
}
.navItem{
      display: block;
      background: rgba(0,0,0,0.8) url('/static/img/bmenu.png') no-repeat;
      background-size: 16px auto;
      color: white;
      line-height: 35px;
      border-bottom: 1px solid #4b4b4b;
      padding-left:37px;
      font-size:14px;
}
.navIc{
      display:block;
      width: 0;
      height: 0;
      border-width: 6px;
      border-color: rgba(0,0,0,0.8) transparent transparent transparent;
      border-style: solid;
      position: absolute;
      bottom: -12px;
      right: 10px;
}
.nav1{
      background-position: 10px -50px
}
.nav2{
      background-position: 10px -100px
}
.nav3{
      background-position: 10px -150px
}
.nav4{
      background-position: 10px -200px
}
.nav5{
      background-position: 10px -250px
}
.bottom{
      bottom: 115px;
}
/*快捷导航 end*/


.displayNone{
      display: none;
}
</style>


